<template>
  <div class="jq-table h-full flex-col">
    <div class="page-card h-full" v-loading="loading">
      <JqTable
        :tableColumn="tableColumn"
        :tableButtons="tableButtons"
        :itemsButtons="itemsButtons"
        :data="tableData"
        :page="page"
        :tableName="'模板库'"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      
      <template #statusText>
          <el-table-column
            show-overflow-tooltip
            :min-width="80"
            prop="statusText"
            label="状态"
            fit="true"
            show-header="true"
            align="left"
          >
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span :class="scope.row.status === 1 ? 'point1' : 'point2'"></span>
                <span>{{ scope.row['statusText'] }}</span>
              </div>
            </template>
          </el-table-column>
      </template>
      </JqTable>
    
      <AddOrUpdateForStaff
        v-if="showDialog"
        v-model:dialogVisible="showDialog"
        ref="addOrUpdateRef"
        :dialogDatas="dialogDatas"
        @update-list="updateList"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'SystemStaff' }); //员工管理
import { reactive, ref, onMounted, computed } from 'vue';
import { useTable } from '@/hooks/useTable';
import {
  replyPhrasePage,
  replyPhraseDeleteById
} from '@/api/automatic/index'
import { JqTable } from '@/components/Table/index';
import AddOrUpdateForStaff from '@/views/automatic/models/components/add-or-update/index.vue';
import { useRouteStore } from '@/store';
const routeStore = useRouteStore();
const currentMenudatas = computed(() => routeStore.currentMenudatas); //路由btn
const addOrUpdateRef = ref();
let searchFormParams = reactive({});
interface Row {
  id: number;
  status: number;
  checkPointsId: number;
  statusConfig: object;
}
// table列表字段
const tableColumn = reactive([
  { label: '模板ID', prop: 'id', width: '80' },
  { label: '模版内容', prop: 'msgContent'},
]);
const showDialog = ref(false);
let tableButtons = reactive([
  {
    id: 43,
    type: 'primary',
    label: '新增',
    perms: 'automatic:models:btn:add',
    onClick: () => {
      showDialog.value = true;
      dialogDatas = {
        title: '新增模板',
        type: 'add',
      };
      // onAddOrUpdate(dialogDatas);
    }
  },
]);

let itemsButtons = reactive([
  {
    id: 45,
    type: 'primary',
    label: '编辑',
    perms: 'automatic:models:btn:edit',
    onClick: (row: Row) => {
      showDialog.value = true;
      dialogDatas = {
        title: '编辑模板',
        type: 'edit',
        datas: row
      };
    }
  },
  {
    id: 47,
    type: 'primary',
    perms: 'automatic:models:btn:del',
    label: '删除',
    onClick: (row: []) => {
      onlizhi(row);
    }
  }
]);
let dialogDatas = reactive({});
const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: replyPhrasePage,
    params: () => searchFormParams
  });
const tableButtonsPermission = (datas: any[], datas1: any[]) => {
  return datas.filter(function (item1: { perms: string }) {
    return datas1.find(function (item2: { perms: string }) {
      return item1.perms === item2.perms;
    });
  });
};
const onlizhi = (rowData: any) => {
  ElMessageBox.confirm('请确认是否删除？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const data: any = await replyPhraseDeleteById({ id: rowData.id });
    if (data.code === 2000) {
      ElMessage.success('已删除');
      getList();
    } else {
      ElMessage.error(data?.message);
      return;
    }
    return;
  });
};
const updateList = () => {
  getList();
  showDialog.value = false;
};
onMounted(() => {
  if(!currentMenudatas.value) {
    return
  }
  tableButtons = tableButtonsPermission(tableButtons, currentMenudatas.value?.tableButtons); //tableButtons根据数据返回按钮信息控制权限
  itemsButtons = tableButtonsPermission(itemsButtons, currentMenudatas.value?.itemsButtons); //itemButtons根据数据返回按钮信息控制权限
});

</script>
<style scoped>
.packageCardcontainer {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;

  > .card {
    flex: 0 0 18%;
    min-width: 18%;
    margin-right: calc(9.99% / 4);
    margin-bottom: 10px;

    /* // 每行最后一个卡片 */
    &:nth-child(5n) {
      margin-right: 0;
    }

    /* // 最后一个卡片 */
    &:last-child {
      margin-right: auto;
    }
  }
}
</style>